<template>
  <view>
    <base-popup :show="show" :has-scroll="true" @close="closeModel(true)">
      <view class="popup">
        <view class="com-title">
          <view class="title-info" @click="showNotice">
            选择发票信息
            <image class="wh-ico" src="/static/images/icon/icon_wh.png" />
          </view>
        </view>
        <view class="scroll-wrapper">
          <view class="block-item">
            <view class="item-title">发票类型</view>
            <view class="item-list">
              <text class="item-list-item selected">电子普通发票</text>
            </view>
            <view class="item-tip item-tip-p">碧选自营全面启动电子普通发票，非碧选自营产品，发票由第三方实际开具</view>
          </view>
          <view class="block-item">
            <view class="item-title">发票内容<text class="item-tip item-tip-l">发票内容选项已根据税法跳转，具体请以展示为准</text></view>
            <view class="item-list">
              <text class="item-list-item" :class="{'selected': formData.invoiceContent === '不开发票'}" @click="handleInvoiceTitleType('不开发票', 1)">不开发票</text>
              <text class="item-list-item" :class="{'selected': formData.invoiceContent === '商品明细'}" @click="handleInvoiceTitleType('商品明细', 1)">商品明细</text>
            </view>
          </view>
          <view v-if="openInvoice" class="block-item">
            <view class="item-title">发票抬头</view>
            <view class="item-list select-radio">
              <view class="select-radio-item" @click="handleInvoiceTitleType('个人', 2)">
                <image class="icon_gou_n" :src=" formData.invoiceTitleType === '个人' ? '/static/images/icon/icon_gou.png' :'/static/images/icon/icon_gou_n.png'" /><text>个人</text>
              </view>
              <view class="select-radio-item" @click="handleInvoiceTitleType('单位', 2)">
                <image class="icon_gou_n" :src="formData.invoiceTitleType === '单位' ? '/static/images/icon/icon_gou.png' :'/static/images/icon/icon_gou_n.png'" /><text>单位</text>
              </view>
            </view>
            <view v-if="formData.invoiceTitleType === '单位'" class="item-input">
              <view class="item-input-item">
                <input v-model="formData.invoiceTitle" placeholder="请输入单位名称(必填)" />
                <view v-if="formData.invoiceTitle" class="close-ico-container" @click="formData.invoiceTitle=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
              <view class="item-input-item">
                <input v-model="formData.gmfTaxpayerIdentifyNo" placeholder="请输入纳税人识别号(必填)">
                <view v-if="formData.gmfTaxpayerIdentifyNo" class="close-ico-container" @click="formData.gmfTaxpayerIdentifyNo=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
              <view class="item-input-item">
                <input v-model="formData.email" placeholder="请输入收票人电子邮箱(必填)" />
                <view v-if="formData.email" class="close-ico-container" @click="formData.email=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
            </view>
            <view v-if="formData.invoiceTitleType === '个人'" class="item-input">
              <view class="item-input-item">
                <input v-model="formData.invoiceTitle" placeholder="请输入姓名(必填)" />
                <view v-if="formData.invoiceTitle" class="close-ico-container" @click="formData.invoiceTitle=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
              <view class="item-input-item">
                <input v-model="formData.email" placeholder="请输入收票人电子邮箱(必填)">
                <view v-if="formData.email" class="close-ico-container" @click="formData.email=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
            </view>
          </view>
          <view v-if="openInvoice && formData.invoiceTitleType === '单位'" class="block-item">
            <view class="item-title" @click="showMore=!showMore">
              更多选填项
              <text class="item-tip item-tip-l">注册地址、电话、开户银行及账号</text>
              <image class="down-icon" src="/static/images/icon/icon_arror_down_grep.png" :class="{show: showMore}" />
            </view>
            <view v-if="showMore" class="item-input">
              <view class="item-input-item">
                <input v-model="formData.gmfRegisterAddress" placeholder="请填写注册地址" />
                <view v-if="formData.gmfRegisterAddress" class="close-ico-container" @click="formData.gmfRegisterAddress=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
              <view class="item-input-item">
                <input v-model="formData.gmfRegisterPhone" placeholder="请填写注册电话" />
                <view v-if="formData.gmfRegisterPhone" class="close-ico-container" @click="formData.gmfRegisterPhone=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
              <view class="item-input-item">
                <input v-model="formData.gmfOpenBank" placeholder="请填写单位开户银行" />
                <view v-if="formData.gmfOpenBank" class="close-ico-container" @click="formData.gmfOpenBank=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
              <view class="item-input-item">
                <input v-model="formData.gmfBankAccount" placeholder="请填写单位银行账号" />
                <view v-if="formData.gmfBankAccount" class="close-ico-container" @click="formData.gmfBankAccount=''">
                  <image class="close-ico" src="/static/images/icon/icon_close_grey.png" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="sure-btn" :class="{'gray': !canSure}">
          <text class="sure-btn-txt" @click="handleSure">确认</text>
        </view>
      </view>
    </base-popup>
    <!-- <view v-if="showNotice" class="tax-notice" @click="showNotice=false">
      <view class="tax-notice-container" @click.stop="">
        <view class="tax-notice-title">发票须知</view>
        <view class="tax-notice-content">
          <view class="tax-notice-txt">1. 发票金额不含优惠券、红包、银行支付有礼等优惠扣减金额。</view>
          <view class="tax-notice-txt">2. 电子普通发票：（1）电子普通发票是税局认可的有效收付款凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载打印；（2）碧选自营全面启用电子普通发票，用户可点击“我的订单-查看发票”查询和下载。</view>
          <view class="tax-notice-txt">3. 第三方卖家销售的商品/服务的发票由卖家自行出具、提供、发票类型和内容由卖家根据实际商品、服务情况决定。</view>
        </view>
        <view class="tax-notice-btn" @click="showNotice=false">我知道了</view>
      </view>
    </view> -->
    <tax-notice ref="taxNotice" />
  </view>
</template>

<script>
import BasePopup from '@/components/base/base-popup'
import taxNotice from './taxNotice'
export default {
  components: {
    BasePopup,
    taxNotice
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    taxInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        'createSource': 1, // 来源信息 1：app 2：后台
        'email': '', // 邮箱
        'gmfBankAccount': '', // 银行账号
        'gmfOpenBank': '',
        'gmfRegisterAddress': '',
        'gmfRegisterPhone': '',
        'gmfTaxpayerIdentifyNo': '',
        'invoiceContent': '不开发票',
        'invoiceTitle': '',
        'invoiceTitleType': '个人',
        'orderNo': '',
        'orderType': '', // 11 箱起传11 ，不是可以不用传
        'remark': '',
        'userId': '' // 用户id
      },
      showMore: false
    }
  },
  computed: {
    // 开不开发票
    openInvoice() {
      return this.formData.invoiceContent !== '不开发票'
    },
    canSure() {
      if (this.formData.invoiceContent === '不开发票') {
        // 不开票可以提交
        return true
      } else {
        // 开票可以提交判断
        if (this.formData.invoiceTitleType === '个人') {
          // 开票可以提交判断 个人   抬头和邮箱要填
          if (this.formData.invoiceTitle && this.formData.email) {
            return true
          } else {
            return false
          }
        } else {
          // 开票可以提交判断 单位   抬头和邮箱要填
          if (
            this.formData.invoiceTitle &&
            this.formData.email &&
            // this.formData.gmfBankAccount &&
            // this.formData.gmfOpenBank &&
            // this.formData.gmfRegisterAddress &&
            // this.formData.gmfRegisterPhone &&
            this.formData.gmfTaxpayerIdentifyNo
          ) {
            return true
          } else {
            return false
          }
        }
      }
    }
  },
  mounted() {
    this.deliverData()
  },
  methods: {
    // 显示通知
    showNotice() {
      this.$refs.taxNotice.show()
    },
    // 切换发票类型,内容
    handleInvoiceTitleType(val, type) {
      if (type === 1) {
        this.formData.invoiceContent = val
      } else if (type === 2) {
        this.formData.invoiceTitleType = val
      }
    },
    // 确定
    handleSure() {
      if (this.canSure) {
        this.deliverData('sureBtn')
        this.closeModel()
      }
    },
    // 数据传递出去
    deliverData(from) {
      this.$emit('deliver', { ...this.formData, from: (from || '') })
    },
    closeModel(flag) {
      if (flag) {
        Object.keys(this.formData).forEach(i => {
          if (this.taxInfo[i]) {
            this.formData[i] = this.taxInfo[i]
          }
          console.log(i)
        })
      }
      this.$emit('close')
    }
  }
}
</script>
<style scoped lang="scss">
.popup {
  background-color: #fff;
  padding: 0 27rpx 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  overflow: hidden;;
  height: 900rpx;
  .scroll-wrapper {
    max-height: 700rpx;
    overflow: auto;
    padding-bottom: 20rpx;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      width: 0px;
      background-color: transparent;
    }
  }
  .com-title {
    padding: 40rpx 0 20rpx;
    .wh-ico {
      width: 26rpx;
      height: 26rpx;
      margin-left: 10rpx;
    }
    .title-info {
      font-size:32rpx;
      color:#000;
      vertical-align: top;
      line-height: 40rpx;
    }
  }
  .block-item {
    padding: 30rpx 0 20rpx;
  }
  .item-title {
    font-size:28rpx;
    color:#000;
    line-height:34rpx;
    position: relative;
  }
  .item-tip {
    font-size:24rpx;
    color:rgba(153,153,153,1);
    line-height:30rpx;
  }
  .item-tip-p {
    padding-top: 20rpx;
  }
  .item-tip-l {
    padding-left: 10rpx;
    display: inline-block;
  }
  .item-list {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 0 0rpx;
    .item-list-item {
      min-width:140rpx;
      height:56rpx;
      background:rgba(255,255,255,1);
      border:1rpx solid rgba(0, 0, 0, 1);
      text-align: center;
      padding: 0 20rpx;
      color: #000;
      font-size: 26rpx;
      line-height: 56rpx;
      margin-right: 40rpx;
    }
    .selected {
      background:#000;
      color: #fff;
    }
  }
  .select-radio {
    padding-top: 20rpx;
    .select-radio-item {
      display: flex;
      align-items: center;
      font-size:26rpx;
      color:rgba(0,0,0,1);
      line-height:32px;
      margin-right: 40rpx;
    }
    .icon_gou_n {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
  .item-input {
    padding: 20rpx 0;
    .item-input-item {
      border-bottom: 1rpx solid #ddd;
      display: flex;
      align-items: center;
      input {
        font-size: 26rpx;
        color: #000;
        padding: 20rpx 0;
        flex: 1;
      }
      .close-ico-container {
        flex-shrink: 0;
        padding: 20rpx;
      }
     .close-ico {
        width: 22rpx;
        height: 22rpx;
      }
    }
  }
  .down-icon {
    width: 24rpx;
    height: 14rpx;
    position: absolute;
    top: 50%;
    margin-top: -4rpx;
    right: 20rpx;
    &.show {
      transform: rotate(180deg);
    }
  }
  .sure-btn {
    position: absolute;
    bottom: 0;
    left: 0rpx;
    width: 100%;
    padding: 20rpx 0 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    background-color: #fff;
    .sure-btn-txt {
      display: block;
      width:690rpx;
      height:80rpx;
      background:rgba(0,0,0,1);
      font-size:28rpx;
      color:rgba(255,255,255,1);
      line-height:80rpx;
      text-align: center;
      margin: 0 auto;
    }
    &.gray {
      .sure-btn-txt {
        background-color: #DDDDDD;
      }
    }
  }
}

</style>
